<template>
  <div id="maptu" style="width: 77.8rem;height: 50rem;">
    <div class="popup" v-if="showPopup">
      {{ popupInfo }}
    </div>
  </div>
</template>

<script setup lang="ts">
import hengshui from "../map/maphs.json"
import { ref, onMounted, watch } from 'vue';
import * as echarts from 'echarts';
import { defineProps } from 'vue';

const props = defineProps({
  datadeep: Array,
  // required: true
});
console.log(props.datadeep, 'map111111111111111')
const chartsY: any = ref();
const aa: any = ref();
const Chain: any = ref<any>(hengshui);
let sandianList = ref<any>([
  { name: '衡水1', value: [115.68, 37.73], info: '这里是衡水1的信息' },
  { name: '1衡水', value: [115.8, 37.3], info: '这里是1衡水的信息' }
])
const namess = ref()
// let sandianList = ref<any>()
// 当前是否显示弹窗
const showPopup = ref<boolean>(false)

// 弹窗中显示的地区信息
const popupInfo = ref<string>('')

const map = () => {
  const chartDom = document.getElementById('maptu')!
  const myChart = echarts.init(chartDom)
  window.addEventListener('resize', () => {
    myChart.resize()
    setTimeout(() => {
      myChart.resize()
    }, 500);
  })

  echarts.registerMap('USA', Chain.value, {
    Alaska: {
      left: -131,
      top: 25,
      width: 15
    },
    Hawaii: {
      left: -110,
      top: 28,
      width: 5
    },
    'Puerto Rico': {
      left: -76,
      top: 26,
      width: 2
    }
  })

  const option = {
    // backgroundColor: '#031a40',
    title: {
      text: '',
      subtext: '',
      sublink: 'http://www.census.gov/popest/data/datasets.html',
      left: 'right',
      // color: '#031a40'
    },
    emphasis: {
      label: {
        show: true
      },
      itemStyle: {
        // 取消高亮效果
        areaColor: null,
        borderColor: null
      },
      focus: 'none' // 取消高亮效果
    },
    tooltip: {
      trigger: 'item',
      // formatter: '123456',
      showDelay: 0,
      transitionDuration: 0.2,
      backgroundColor: '#081f3774',
      borderColor: '#081f3774'
    },
    // toolbox: {
    //   show: true,
    //   //orient: 'vertical',
    //   left: 'left',
    //   top: 'top',
    //   feature: {
    //     dataView: { readOnly: false },
    //     restore: {},
    //     saveAsImage: {}
    //   }
    // },
    series: [
      {
        name: 'USA PopEstimates',
        type: 'map',
        roam: true,
        map: 'USA',
        emphasis: {
          label: {
            show: false
          },
          itemStyle: {
            areaColor: null, // 取消高亮效果
            borderColor: null
          }
        },
        data: sandianList.value,
        itemStyle: {
          // 设置地图每一块的默认样式
          areaColor: '#275079',  //区块颜色
          borderColor: '#fff',//边框颜色
          emphasis: {
            areaColor: null, // 取消高亮效果 
            borderColor: null
          }
        },
        markPoint: {
          symbol: 'pin',
          symbolSize: 40,
          label: {
            show: false,
            formatter: '{b}',
            position: 'inside'
          },
          data: sandianList.value.map((point: any) => ({
            coord: point.value,
            name: point.name,
            value: point.value,
            itemStyle: {
              color: 'red',
            },
            emphasis: {
              itemStyle: {
                color: 'red'
              }
            },
            tooltip: {
              show: true,
              formatter: `
              <div style="width:280px;height:212px;">
                <h3 style="color:#fff;">{b}</h3>
                <div style="display: flex;text-align: center;justify-content: space-around;margin-top:30px;">
                    <div>
                      <p style="font-size: 24px;color:#FFB92D;">${point.info.member}</p>
                      <p style="font-size: 14px;color:#fff;margin-top: 10px;">正式党员总人数</p>
                    </div>
                    <div>
                      <p style="font-size: 24px;color:#FFB92D;">${point.info.prepare}</p>
                      <p style="font-size: 14px;color:#fff;margin-top: 10px;">预备党员总数</p>
                    </div>
                </div>
                <div style="display: flex;text-align: center;justify-content: space-around;margin-top:50px;">
                    <div>
                      <p style="font-size: 24px;color:#FFB92D;">${point.info.active}</p>
                      <p style="font-size: 14px;color:#fff;margin-top: 10px;">入党积极分子总数</p>
                    </div>
                    <div>
                      <p style="font-size: 24px;color:#FFB92D;">${point.info.honor}</p>
                      <p style="font-size: 14px;color:#fff;margin-top: 10px;">党员荣誉总数</p>
                    </div>
                </div>
              </div>
                          `
            }
          })),
          emphasis: {
            label: {
              show: false,
              position: 'inside'
            }
          },
          clickable: true,
          selectedMode: 'single',
          selectedOffset: 10,
          tooltip: {
            show: true,
            trigger: 'item',
            formatter: '{b+1}'
          },
          // 点击事件处理函数
          onClick: (params: any) => {
            // 获取当前点击的散点数据信息
            const pointData = sandianList.value.find((point: { name: any; }) => point.name === params.name)
            // 显示弹窗，并设置弹窗中显示的内容
            showPopup.value = true
            popupInfo.value = pointData.info
            // itemStyle: {
            //   opacity: 0
            // }
          }
        }
      }
    ]
  }

  myChart.setOption(option)

}
const debouncedResize = debounce(map, 1000);
function debounce(func: { (): void; apply?: any; }, delay: number | undefined) {
  let timeoutId: number | undefined;

  return function () {
    const context = this;
    const args = arguments;

    clearTimeout(timeoutId);

    timeoutId = setTimeout(() => {
      func.apply(context, args);
    }, delay);
  };
}
watch(props, () => {
  chartsY.value = props.datadeep && props.datadeep.map((item: any) => {
    return item.member
  })
  console.log(chartsY.value, 'membei')
  aa.value = props.datadeep && props.datadeep.map((item: any) => {
    return [item.longitude, item.latitude]
  })
  namess.value = props.datadeep && props.datadeep.map((item: any) => {
    return item.name
  })
  sandianList.value = props.datadeep && props.datadeep.map((item: any) => {
    return {
      name: item.name,
      value: [parseFloat(item.longitude), parseFloat(item.latitude)],
      info: item.member
    }
  })
  console.log(sandianList.value, 'sandianList')
  debouncedResize()
})
</script>

<style lang="scss" scoped>
.itemDialog {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap
}

@function torem($px) {
  //$px为需要转换的字号
  @return $px / 14px * 0.14rem; //100px为根字体大小
}

#maptu {
  width: torem(778px) !important;
  height: torem(420px) !important;
  color: #fff;
}

.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.8);
  padding: torem(20px);
  border-radius: torem(10px);
  // display: flex;
  background: #081f3774;

}
</style>
